function init() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    const selectDom = document.getElementById('sel');
    let options = ``

    for (let i = 1; i <= 100; i++) {
        options += `<option value="${i}">${i}</option>`;
    }

    selectDom.innerHTML = options


    // 数组深拷贝
    function deepCopy(data) {

        // 1. 先判断是否传递参数 如果没传惨 就不继续执行往下代码
        if (data == undefined) {
            // console.log(1);
            return; //结束
            // console.log(2);
        }

        // 2. 继续判断  判断传入的实参是数组还是对象  三目运算
        var newData = Array.isArray(data) == true ? [] : {};


        // 3. for in进行遍历 实参
        for (var index in data) {

            // 为什么index不需要加上引号? 原因是 index本身就string类型
            // console.log( "函数内部输出 index ==> " ,typeof index); // string
            // console.log( "函数内部输出 data[index] ==> " , index , data[index] );
            // console.log( "函数内部输出 data[index] ==> " , typeof data[index] ); // object

            // 再次判断
            // 若是object 则说明还是引用数据类型   ==> 深浅拷贝 唯一的代码区别 
            if (typeof data[index] === "object") {
                // 递归函数
                // data[index]若还是引用数据类型,继续调用deepCopy()函数 继续复制(拷贝)数据

                // 等号左边是新数据  等号右边是即将被复制的数据  然后赋值给等号左边
                newData[index] = deepCopy(data[index]);
            } else {
                // 若不是object 则是基本数据类型 不需要再执行递归了,直接进行赋值
                newData[index] = data[index];
            }
        }

        // 循环结束,最终得到经过拷贝的数据
        // console.log('在函数内部 输出经过复制的数据 ==>', newData);

        return newData;
    }

    // 关卡数
    var num = 0;

    // 通关位置
    var destination;
    var has = true;

    var newarr = deepCopy(levels[num]);

    // 返回上一步
    var lastStep = deepCopy(newarr);

    // 步数
    var step = 0;

    var wallArr = [];
    var boxArr = [];

    var playr = {};
    playr.direction = 'down';


    function create(ar) {
        wallArr = [];
        boxArr = [];
        if (!destination) {
            destination = [];
        } else {
            has = false;
        }
        // 创建地图
        for (var i = 0; i < ar.length; i++) {
            for (var j = 0; j < ar[i].length; j++) {
                var img = new Image();
                img.src = "./images/block.gif";
                context.drawImage(img, j * 25, i * 25, 25, 25);
                if (destination) {
                    destination.forEach(function (v) {
                        if (i === v.y && j === v.x) {
                            img.src = "./images/mubiao.png";
                            context.drawImage(img, j * 25, i * 25, 25, 25);
                        }
                    })
                }

                switch (ar[i][j]) {
                    case 0:
                        // img.src = "./images/block.gif";
                        break;
                    case 1:
                        img.src = "./images/wall.png";
                        wallArr.push({
                            x: j,
                            y: i,
                        })
                        context.drawImage(img, j * 25, i * 25, 25, 25);
                        break;
                    case 2:
                        img.src = "./images/mubiao.png";
                        if (has) {
                            destination.push({
                                x: j,
                                y: i,
                            })
                        }
                        context.drawImage(img, j * 25, i * 25, 25, 25);
                        break;
                    case 3:
                        img.src = "./images/box.png";
                        boxArr.push({
                            x: j,
                            y: i,
                        })
                        context.drawImage(img, j * 25, i * 25, 25, 25);
                        break;
                    case 4:
                        playr.x = j;
                        playr.y = i;
                        img.src = "./images/" + playr.direction + ".png";

                        context.drawImage(img, j * 25, i * 25, 25, 25);
                        break;
                    case 5:
                        img.src = "./images/box.png";
                        if (has) {
                            destination.push({
                                x: j,
                                y: i,
                            })
                        }
                        boxArr.push({
                            x: j,
                            y: i,
                        })
                        context.drawImage(img, j * 25, i * 25, 25, 25);
                        break;
                }
                // console.log(img);
                // context.drawImage(img, j * 25, i * 25, 25,  25);
                // context.clearRect(0, 0, c.width, c.height);
            }
        }

        // 移动
        document.onkeydown = function (e) {
            // console.log(e.keyCode)
            var x = playr.x;
            var y = playr.y;
            // console.log(x, y);

            // 是否移动
            var moveBool = true;
            var keyNum = e.keyCode;

            // 是否存储上一步
            var lastBool = true;

            // 上
            if (keyNum === 38) {
                playr.direction = 'up';
                boxArr.forEach(function (v, i) {
                    var vx = v.x;
                    var vy = v.y;
                    if (vx === x && vy == y - 1) {
                        boxArr.forEach(function (v, i) {
                            if (v.x === vx && v.y == vy - 1) {
                                moveBool = false;
                                return;
                            }
                        })
                        wallArr.forEach(function (v, i) {
                            if (v.x === vx && v.y == vy - 1) {
                                moveBool = false;
                                return;
                            }
                        })
                        if (moveBool) {
                            if (lastBool) {
                                lastStep = deepCopy(newarr);
                                lastBool = false;
                            }
                            newarr[vy - 1][vx] = newarr[vy][vx];
                            newarr[vy][vx] = 0;
                        }
                        return;
                    }
                })
                wallArr.forEach(function (v, i) {
                    if (v.x === x && v.y == y - 1) {
                        moveBool = false;
                        return;
                    }
                })
                if (moveBool) {
                    if (lastBool) {
                        lastStep = deepCopy(newarr);
                    }
                    step++;
                    mes();
                    newarr[y - 1][x] = newarr[y][x];
                    newarr[y][x] = 0;
                }


                // context.clearRect(0, 0, canvas.width, canvas.height);
                create(newarr);
                isNext();
            }
            // 下
            if (keyNum === 40) {
                playr.direction = 'down';
                boxArr.forEach(function (v, i) {
                    var vx = v.x;
                    var vy = v.y;
                    if (vx === x && vy == y + 1) {
                        boxArr.forEach(function (v, i) {
                            if (v.x === vx && v.y == vy + 1) {
                                moveBool = false;
                                return;
                            }
                        })
                        wallArr.forEach(function (v, i) {
                            if (v.x === vx && v.y == vy + 1) {
                                moveBool = false;
                                return;
                            }
                        })
                        if (moveBool) {
                            if (lastBool) {
                                lastStep = deepCopy(newarr);
                                lastBool = false;
                            }
                            newarr[vy + 1][vx] = newarr[vy][vx];
                            newarr[vy][vx] = 0;
                        }
                        return;
                    }
                })
                wallArr.forEach(function (v, i) {
                    if (v.x === x && v.y == y + 1) {
                        moveBool = false;
                        return;
                    }
                })
                if (moveBool) {
                    if (lastBool) {
                        lastStep = deepCopy(newarr);
                    }
                    step++;
                    mes();
                    newarr[y + 1][x] = newarr[y][x];
                    newarr[y][x] = 0;
                }


                context.clearRect(0, 0, canvas.width, canvas.height);
                create(newarr);
                isNext();
            }
            // 左
            if (keyNum === 37) {
                playr.direction = 'left';
                boxArr.forEach(function (v, i) {
                    var vx = v.x;
                    var vy = v.y;
                    if (vx === x - 1 && vy == y) {
                        boxArr.forEach(function (v, i) {
                            if (v.x === vx - 1 && v.y == vy) {
                                moveBool = false;
                                return;
                            }
                        })
                        wallArr.forEach(function (v, i) {
                            if (v.x === vx - 1 && v.y == vy) {
                                moveBool = false;
                                return;
                            }
                        })
                        if (moveBool) {
                            if (lastBool) {
                                lastStep = deepCopy(newarr);
                                lastBool = false;
                            }
                            newarr[vy][vx - 1] = newarr[vy][vx];
                            newarr[vy][vx] = 0;
                        }
                        return;
                    }
                })
                wallArr.forEach(function (v, i) {
                    if (v.x === x - 1 && v.y == y) {
                        moveBool = false;
                        return;
                    }
                })
                if (moveBool) {
                    if (lastBool) {
                        lastStep = deepCopy(newarr);
                    }
                    step++;
                    mes();
                    newarr[y][x - 1] = newarr[y][x];
                    newarr[y][x] = 0;
                }

                context.clearRect(0, 0, canvas.width, canvas.height);
                create(newarr);
                isNext();
            }
            // 右
            if (keyNum === 39) {
                playr.direction = 'right';
                boxArr.forEach(function (v, i) {
                    var vx = v.x;
                    var vy = v.y;
                    if (vx === x + 1 && vy == y) {
                        boxArr.forEach(function (v, i) {
                            if (v.x === vx + 1 && v.y == vy) {
                                moveBool = false;
                                return;
                            }
                        })
                        wallArr.forEach(function (v, i) {
                            if (v.x === vx + 1 && v.y == vy) {
                                moveBool = false;
                                return;
                            }
                        })
                        if (moveBool) {
                            if (lastBool) {
                                lastStep = deepCopy(newarr);
                                lastBool = false;
                            }
                            newarr[vy][vx + 1] = newarr[vy][vx];
                            newarr[vy][vx] = 0;
                        }
                        return;
                    }
                })
                wallArr.forEach(function (v, i) {
                    if (v.x === x + 1 && v.y == y) {
                        moveBool = false;
                        return;
                    }
                })
                if (moveBool) {
                    if (lastBool) {
                        lastStep = deepCopy(newarr);
                    }
                    step++;
                    mes();
                    newarr[y][x + 1] = newarr[y][x];
                    newarr[y][x] = 0;
                }

                // context.clearRect(0, 0, canvas.width, canvas.height);
                create(newarr);
                isNext();
            }
        }

    }
    create(newarr);

    // 判断是否通关
    function isNext() {
        console.log(boxArr, destination);
        if (JSON.stringify(boxArr) == JSON.stringify(destination)) {
            // 关卡数
            num++;
            start();
            lastStep = deepCopy(newarr);
            create(newarr);
            mes();
        }
    }

    // 推箱子扩展功能
    function fn() {
        var fn1 = document.getElementById('fn1');
        var fn2 = document.getElementById('fn2');
        var fn3 = document.getElementById('fn3');
        var fn9 = document.getElementById('fn9');
        fn1.onclick = function () {
            num--;
            if (num < 0) {
                num = 99;
            }
            start();
            create(newarr);
            mes();
        }
        fn2.onclick = function () {
            num++;
            if (num > 99) {
                num = 0;
            }
            start();
            create(newarr);
            mes();
        }
        fn3.onclick = function () {
            start();
            create(newarr);
            mes();
        }
        fn9.onclick = function () {
            playr.direction = 'down';
            create(lastStep);
            newarr = deepCopy(lastStep);
        }


    }
    fn();

    function mes() {
        var fn4 = document.getElementById('fn4');
        var fn5 = document.getElementById('fn5');
        var fn6 = document.getElementById('fn6');
        var sel = document.getElementById('sel');
        sel.value = num + 1;
        fn4.onclick = function () {
            num = sel.value - 1;
            newarr = deepCopy(levels[num]);
            start();
            create(newarr);
            mes();
            create(newarr);
        }
        fn5.innerHTML = num + 1;
        fn6.innerHTML = step;
    }
    mes();

    // 初始化变量
    function start() {
        newarr = deepCopy(levels[num]);
        playr.direction = 'down';
        destination = null;
        has = true;
        step = 0;
    }
    start();






}
window.onload = function () {
    const imgLoad = () => {
        const imgList = [
            "./images/block.gif",
            "./images/box.png",
            "./images/mubiao.png",
            "./images/down.png",
            "./images/left.png",
            "./images/right.png",
            "./images/up.png",
            "./images/wall.png"
        ]
        const imgLoads = imgList.map(item => {
            return new Promise((resolve, reject) => {
                const img = new Image()
                img.src = item
                img.onload = () => {
                    resolve()
                }
            })
        })
        return Promise.all(imgLoads)
    }
    imgLoad().then(()=>{
        init()
    })
} 